<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <script src="/x/zjabank/static/js/echarts.js"></script>
    <script type="text/javascript" src="/x/zjabank/static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/x/zjabank/static/widget/grid/map.js"></script>
    <script type="text/javascript" src="/x/zjabank/static/widget/grid/dlshouwen.grid.min.js"></script>
    <script type="text/javascript" src="/x/zjabank/static/widget/grid/i18n/zh-cn.js"></script>
    <!-- bootstrap -->
    <script type="text/javascript" src="/x/zjabank/static/widget/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/x/zjabank/static/widget/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/x/zjabank/static/widget/grid/dlshouwen.grid.min.css"/>

    <!-- font-awesome -->
    <link rel="stylesheet" type="text/css" href="/x/zjabank/static/widget/fontAwesome/css/font-awesome.min.css" media="all"/>
	
</head>
<body>
    <div>
	<div id="echarts" style="width:850px;height:200px;margin:0px auto;" ></div>
	<div id="gridContainer" class="dlshouwen-grid-container"></div>
    <div id="gridToolBarContainer" class="dlshouwen-grid-toolbar-container"></div>
    </div>
	<script type="text/javascript">
	    
		var myChart = echarts.init(document.getElementById('echarts'));
		jQuery.ajax({  
	    	url:'/x/zjabank/rst/resend?controller=charts@tjfxshuju',
	    	type:'get',  
	    	dataType:'json', 
	    	cache:false,
	    	success:function(jsons){
	    		var a=[];
	    		 for(var o in jsons){
	    			 a[o]=jsons[o];
	    		 }
	    		 var map1 = getMap();
	    		 map1.put("已发布数量",a[5]);
	    		 map1.put("已撤销数量",a[6]);
	    		 map1.put("警示期数量",a[7]);
	    		 map1.put("已修改数量",a[8]);
	    		 map1.put("其他",a[9]);
        var labelTop = {
            normal : {
                label : {
                    show : true,
                    position : 'center',
                    formatter : '{b}',
                    textStyle: {
                        baseline : 'bottom'
                    }
                },
                labelLine : {
                    show : false
                }
            }
        };
        var labelFromatter = {
            normal : {
                label : {
                    formatter : function (params){
                        return 100 - params.value + '%'
                    },
                    textStyle: {
                        baseline : 'top'
                    }
                }
            },
        }
        var labelBottom = {
            normal : {
                color: '#ccc',
                label : {
                    show : true,
                    position : 'center'
                },
                labelLine : {
                    show : false
                }
            }
        };

        var radius = [40, 55];
        var name = '';
		var option = {
            tooltip: {
                trigger: 'item',
                //formatter: "{a} <br/>{b}: {c} ({d}%)",
                	formatter: function (params, ticket,  callback) {
                  	  var res = params.name+':<br/>';
                  	res =res+'数量:'+ params.value+';总金额:'+map1.get(params.name)+'(万元)';
                        return res; 
                      }
            },
            legend: {
                orient: 'horizontal',
                x: 'center',
                y : 'bottom',
                data:['已发布数量','已撤销数量','警示期数量','已修改数量','其他']
            },
            series: [
                {
                    name:name,
                    type:'pie',
                    radius: radius,
                    center : ['12.5%', '30%'],
                    
                    data:[
                        {value:a[4], name:'其他',itemStyle:labelBottom},
                        {value:a[0], name:'已发布数量',itemStyle:labelTop}
                    ]
                },
                {
                    name:name,
                    type:'pie',
                    radius: radius,
                    center : ['37.5%', '30%'],
                    
                    data:[
                        {value:a[4], name:'其他',itemStyle:labelBottom},
                        {value:a[1], name:'已撤销数量',itemStyle:labelTop}
                    ]
                },
                {
                    name:name,
                    type:'pie',
                    radius: radius,
                    center : ['62.5%', '30%'],
                    
                    data:[
                        {value:a[4], name:'其他',itemStyle:labelBottom},
                        {value:a[2], name:'警示期数量',itemStyle:labelTop}
                    ]
                },
                {
                    name:name,
                    type:'pie',
                    radius: radius,
                    center : ['87.5%', '30%'],
                    data:[
                        {value:a[4], name:'其他',itemStyle:labelBottom},
                        {value:a[3], name:'已修改数量',itemStyle:labelTop}
                    ]
                }
            ]
        };
        myChart.setOption(option);
	    	},
        error:function(){  
       	 alert("数据加载失败！请检查数据链接是否正确");  
       }  
   });
		//列表
		var area = {0:'已发布',1:'已撤销',2:'警示期',3:'已修改',4:'其他'};
	    var gridColumns = [{
	        id: 'lieming',
	        title: '状态',
	        type: 'string',
	        codeTable: area,
	        columnClass: 'text-center',
	        hideType: 'sm|xs',
	        fastQuery: true,
	        fastQueryType: 'eq'
	    }, {
	        id: 'count',
	        title: '数量',
	        type: 'number',
	        format: '#,###',
	        columnClass: 'text-center',
	        hideType: 'xs',
	        fastQuery: true,
	        fastQueryType: 'eq'
	    },{
	        id: 'sum',
	        title: '总金额(万元)',
	        type: 'number',
	        format: '#,###.00',
	        columnClass: 'text-center',
	        hideType: 'xs',
	        fastQuery: true,
	        fastQueryType: 'eq'
	    }];
	    var gridOption = {
	        lang: 'zh-cn',
	        ajaxLoad: true,
	        loadURL: '/x/zjabank/rst/resend?controller=charts@tjfxlb',
	        exportFileName: '用户列表',
	        columns: gridColumns,
	        gridContainer: 'gridContainer',
	        toolbarContainer: 'gridToolBarContainer',
	        tools: '',
	        pageSize: 10,
	        pageSizeLimit: [10, 20, 50]
	    };
	    var grid = $.fn.dlshouwen.grid.init(gridOption);
	    $(function () {
	        grid.load();
	    });
    </script>
</body>
</html>